<template>
    <el-row class="main-cont box box-tb">
        <el-col class=" box box-align-center  padd20">
            <div class="posr">
                <el-avatar :size="112" :src="info.user.icon"></el-avatar>

               <!-- <el-upload class="upload-demo" :action="uploadfileurl" :show-file-list="false" ref="upload"
                    :on-success="success" :auto-upload="true" :before-upload="beforeUpload">
                    <span class="posa">更换头像</span>
                </el-upload> -->
            </div>
            <div class="box box-tb box-algin-center box-pack-start user-info ml20">
                <div class="box box-align-center box-pack-start mb10">
                    <span class="user-name mr10">{{info.user.name}}</span>
                    <span class="role">{{info.roleName}}</span>
                </div>
                <span class="tl">职工号：{{info.user.zgh}}</span>
            </div>
        </el-col>
        <el-col class=" box box-tb box-align-start padd20">
            <div class="title mb20">基本信息</div>
            <div style="margin-left: 72px;">
                <div class="box box-align-center mb20">
                    <span class="mr20" style="font-size: 14px;">学校</span>
                    <div class="cont tl">{{info.schoolName}}</div>
                </div>
                <div class="box box-align-center mb20">
                    <span class="mr20" style="font-size: 14px;">身份</span>
                    <div class="cont tl" style="width: auto;">{{info.roleName}}</div>
                </div>
            </div>
        </el-col>
        <!-- <el-col class=" box box-tb box-align-start padd20">
            <div class="title mb20">账号信息</div>
            <div style="margin-left: 72px;">
                <div class="box box-align-center mb20">
                    <span class="mr20" style="font-size: 17px;">账号</span>
                    <div class="cont tl">{{info.user.userCode}}</div>
                </div>
            </div>
        </el-col> -->
        <el-col class=" box box-tb box-align-start padd20">
            <div class="title mb20">修改密码</div>
            <div>
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item label="账号">
                        <el-input v-model="info.user.userCode" autocomplete="off" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off" show-password>
                        </el-input>
                    </el-form-item>
                   <!-- <el-form-item label="新密码" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off" show-password></el-input>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
        <el-col class=" box box-tb box-align-start padd20" v-if="$store.getters.getMaxRole == 'super'">
            <div class="title mb20">删除手机号</div>
            <div>
                <el-form :model="form" status-icon :rules="rule" ref="form" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="form.phone" placeholder="请输入要删除的手机号" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submit('form')">删除</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        data() {
            // var validatePass3 = (rule, value, callback) => {
            //     if (value === '') {
            //         callback(new Error('请输入旧密码'));
            //     } else {
            //         if (this.ruleForm.checkPass !== '') {
            //             this.$refs.ruleForm.validateField('checkPass');
            //         }
            //         callback();
            //     }
            // };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                } else {
                    if (this.ruleForm.pass !== '') {
                        this.$refs.ruleForm.validateField('pass');
                    }
                    callback();
                }
            };
            // var validatePass2 = (rule, value, callback) => {
            //     if (value === '') {
            //         callback(new Error('请再次输入密码'));
            //     } else if (value !== this.ruleForm.pass) {
            //         callback(new Error('两次输入密码不一致!'));
            //     } else {
            //         callback();
            //     }
            // };
            return {
                info: this.$store.state.loginInfo,
                uploadfileurl: this.$url.baseURL + '/upload/uploadfile',
                ruleForm: {
                    pass: '',
                    checkPass: '',
                },
                form:{
                    phone:''
                },
                rules: {
                    pass: [{ required: true, message: '请输入新密码', trigger: 'change' }],
                    // checkPass: [{ required: true, message: '请输入旧密码', trigger: 'change' }]
                },
                rule: {
                    phone: [{ required: true, message: '手机号不能为空', trigger: 'change' }],
                    // checkPass: [{ required: true, message: '请输入旧密码', trigger: 'change' }]
                }
            }
        },
        mounted() {
            console.log(this.info);
        },
        methods: {
            success(response, file, fileList) {
                console.log(response);
                this.info.user.icon = response.body.data.url
            },
            beforeUpload(file) {
                const fileName = file.name;
                const index = fileName.lastIndexOf(".");
                const ext = fileName.substr(index + 1);
                const arr = ["jpg", "png"];
                const isOk = arr.includes(ext);
                if (!isOk) {
                    this.$message.warning('请上传png/jpg格式！');
                    return false;
                }
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let url = '/sysuser/updatepwd';
                        this.$ajax.post(url, {
                            newpwd: this.ruleForm.pass,
                            token:this.$store.getters.getToken
                        }).then(res => {
                            console.log(res)
                            if (res.state.code == 0) {
                                this.$message.success('修改成功')
                            } else {
                                this.$message.error("操作失败")
                            }
                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            // 删除手机号
            submit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let url = '/sysuser/remove';
                        this.$ajax.post(url, {
                            usercode: this.form.phone
                        }).then(res => {
                            console.log(res)
                            if (res.state.code == 0) {
                                this.$message.success('删除成功')
                            } else {
                                this.$message.error("操作失败")
                            }
                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    .main-cont {
        background-color: #fff;
        padding-left: 100px;

        .user-info {
            width: 300px;

            .user-name {
                color: #181623;
                font-size: 26px;
            }

            .role {
                padding: 0 10px;
                width: auto;
                height: 28px;
                line-height: 28px;
                background: #D9DCF9;
                border-radius: 14px;
                color: #7F84E4;
                font-size: 17px;
            }
        }

        .title {
            // width: 70px;
            height: 30px;
            line-height: 30px;
            font-size: 17px;
            color: #2F3142;
            border-bottom: 5px solid #626BF1;
        }

        .cont {
            padding: 0 20px;
            width: 328px;
            height: 42px;
            line-height: 42px;
            background: #F8F9FC;
            border: 1px solid #EEF4F8;
            border-radius: 4px;
            color: #7B879F;
            font-size: 14px;
        }

        .posr {
            position: relative;

            &:hover {
                .posa {
                    display: block;
                }
            }
        }

        .posa {
            display: none;
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 17px;
        }
    }
</style>
